<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-04-25 10:48:08
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-05-08 14:23:33
 * @FilePath: /XMate-h5/src/views/messageCenter/messageList/messageCell.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="px-4 bg-white py-2 text-[#262626]">
    <div
      class="bg-[#F9FAFC] rounded-[8px] cursor-pointer hover-card active-card"
      @click="clickItem"
    >
      <div class="flex flex-col px-5 pt-5 gap-2">
        <div class="flex flex-row items-start justify-between">
          <h3 class="font-bold text-[14px]">{{ item.subject }}</h3>
          <div class="flex flex-row justify-end items-center min-w-[80px] gap-1 pt-1">
            <div
              :class="`w-[6px] h-[6px] rounded-full `"
              :style="{ 'background-color': currentStatus.color }"
            />
            <p class="text-sm">{{ currentStatus.text }}</p>
          </div>
        </div>

        <div class="flex flex-row items-center">
          <h4 class="text-[#8C8C8C] text-sm mr-2.5 min-w-[60px]">客户名称</h4>
          <p class="text-[#262626] text-sm">{{ item.customerName || "-" }}</p>
        </div>

        <div class="flex flex-row items-center">
          <h4 class="text-[#8C8C8C] text-sm mr-2.5 min-w-[60px]">创建人</h4>
          <p class="text-[#262626] text-sm">{{ item.confHostUserName }}</p>
        </div>

        <div class="flex flex-row items-center">
          <h4 class="text-[#8C8C8C] text-sm mr-2.5 min-w-[60px]">创建时间</h4>
          <p class="text-[#262626] text-sm">{{ item.confCreatedTime }}</p>
        </div>
      </div>
      <van-divider></van-divider>
      <div class="flex flex-row items-center justify-between px-5 pb-2.5">
        <p class="text-[#8C8C8C] text-sm">{{ lastMsgTimeDes }}</p>
        <div class="flex flex-row items-center text-sm text-[#8C8C8C] gap-1">
          查看详情
          <van-icon name="arrow"></van-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineEmits, defineProps } from "vue";
// @ts-ignore
import { MsgListItemModel } from "@/services/msgCenter/type";
import dayjs from "dayjs";
const props = defineProps<{
  item: MsgListItemModel;
}>();

const statusMap = {
  done: {
    text: "已完成",
    color: "#D9D9D9",
  },
  inProgress: {
    text: "进行中",
    color: "#52C41A",
  },
};

const currentStatus = computed(() => {
  return props.item.confStatus === 0 ? statusMap["inProgress"] : statusMap["done"];
});

const lastMsgTimeDes = computed(() => {
  if (!props.item.lastMsgTime) return "";
  return dayjs(props.item.lastMsgTime).format("MM月DD日.HH:mm");
});

const emit = defineEmits(["clickItem"]);

const clickItem = () => {
  emit("clickItem");
};
</script>

<style scoped lang="less">
.hover-card {
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.active-card {
  &:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}
</style>
